// import WordCloud from "./WordCloud";
"use client";
import WordCloud from "@/components/WordCloud";
import { useEffect, useState } from "react";
import { getWordCloud } from "../../request/wordCloud";


// 简单实现一个线性缩放函数
function scaleFontSize(minValue: number, maxValue: number, value: number) {
  const minFontSize = 10;
  const maxFontSize = 120;

  if (maxValue === minValue) return (minFontSize + maxFontSize) / 2;
  return minFontSize + (value - minValue) * (maxFontSize - minFontSize) / (maxValue - minValue);
}

export default function WordCloudPage() {
  const [wordsData, setWordsData] = useState<any>([])
  const [model, setModel] = useState<boolean>(false)

  useEffect(() => {
    //获取词云数据
    getWordCloud().then((res) => {
      if (res) {
        // 给每个词添加计算后的字体大小
        const values = res.map((w: { value: number; }) => w.value);
        const minValue = Math.min(...values);
        const maxValue = Math.max(...values);

        const wordsWithFontSize = res.map((w: { value: number; }) => ({
          ...w,
          fontSize: scaleFontSize(minValue, maxValue, w.value)
        }));

        setWordsData(wordsWithFontSize)
      }
    })
  }, [])

  return (
    <div className="bg-white w-[100%] h-[100%]">
      <div className="flex mx-auto space-x-1 w-fit text-[24px]">
        <div onClick={() => setModel(true)}>云词</div>
        <div onClick={() => setModel(false)}>统计</div>
      </div>

      <div className="bg-white w-full h-full">
        {model ? (
          <>
            {wordsData && <WordCloud words={wordsData} />}
          </>
        ) : (
          <>
            <WordRank wordList={wordsData}></WordRank>
          </>)}
      </div>
    </div>
  );
}


const WordRank = ({ wordList }: { wordList: { en: string; value: number; zh?: string }[] }) => {
  const [visibleSet, setVisibleSet] = useState(new Set());

  const toggleVisibility = (en: string) => {
    const newSet = new Set(visibleSet);
    if (newSet.has(en)) {
      newSet.delete(en);
    } else {
      newSet.add(en);
    }
    setVisibleSet(newSet);
  };

  return (
    <div className="max-w-4xl mx-auto mt-4">
      {/* 表头 */}
      <div className="flex justify-center items-center text-center space-x-2 py-2 border-b font-semibold bg-gray-100">
        <div className="w-8">序号</div>
        <div className="w-24">英文</div>
        <div className="flex-1">中文</div>
        <div className="w-12">评分</div>
      </div>

      {/* 列表 */}
      {wordList.map((e, i) => (
        <div
          key={e.en}
          className="flex justify-center items-center text-center space-x-2 py-1 border-b cursor-pointer hover:bg-gray-50"
          onClick={() => toggleVisibility(e.en)}
        >
          <div className="w-8">{i + 1}</div>
          <div className="w-24">{e.en}</div>
          <div className="flex-1">
            {visibleSet.has(e.en) ? e.zh : <span className="text-gray-400">点击查看</span>}
          </div>
          <div className="w-12">{e.value}</div>
        </div>
      ))}
    </div>
  );
}